<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify OAuth Callback</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .container {
      text-align: center;
      padding: 2rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      backdrop-filter: blur(10px);
    }
    .spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto 1rem;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    h1 {
      margin: 0 0 0.5rem;
      font-size: 1.5rem;
      font-weight: 600;
    }
    p {
      margin: 0;
      opacity: 0.9;
    }
    .error {
      background: rgba(239, 68, 68, 0.2);
      color: #fee2e2;
    }
  </style>
</head>
<body>
  <div class="container" id="content">
    <div class="spinner"></div>
    <h1>Connecting to Netlify</h1>
    <p>Please wait while we complete the authentication...</p>
  </div>

  <script>
    (function() {
      try {
        // Extract access token from URL hash
        const hash = window.location.hash.substring(1);
        const params = new URLSearchParams(hash);
        const accessToken = params.get('access_token');
        const error = params.get('error');
        const errorDescription = params.get('error_description');

        if (error) {
          // Show error
          document.getElementById('content').className = 'container error';
          document.getElementById('content').innerHTML = `
            <h1>Authentication Failed</h1>
            <p>${errorDescription || error}</p>
          `;

          // Send error to parent window
          if (window.opener) {
            window.opener.postMessage({
              type: 'netlify-oauth-error',
              error: errorDescription || error
            }, window.location.origin);
          }

          // Close window after a delay
          setTimeout(() => {
            window.close();
          }, 3000);
          return;
        }

        if (!accessToken) {
          throw new Error('No access token received from Netlify');
        }

        // Send token to parent window
        if (window.opener) {
          window.opener.postMessage({
            type: 'netlify-oauth-success',
            access_token: accessToken
          }, window.location.origin);

          // Success message
          document.getElementById('content').innerHTML = `
            <svg style="width: 48px; height: 48px; margin: 0 auto 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
            <h1>Success!</h1>
            <p>You can close this window.</p>
          `;

          // Auto close after short delay
          setTimeout(() => {
            window.close();
          }, 1500);
        } else {
          throw new Error('No parent window found');
        }
      } catch (err) {
        console.error('OAuth callback error:', err);

        document.getElementById('content').className = 'container error';
        document.getElementById('content').innerHTML = `
          <h1>Authentication Error</h1>
          <p>${err.message}</p>
          <p style="margin-top: 1rem; font-size: 0.875rem;">You can close this window and try again.</p>
        `;

        // Send error to parent window
        if (window.opener) {
          window.opener.postMessage({
            type: 'netlify-oauth-error',
            error: err.message
          }, window.location.origin);
        }
      }
    })();
  </script>
</body>
</html>
